<template>
  <div>
    <input
      :id="`input-${placeholder}`"
      :placeholder="placeholder"
      class="
                block
                w-full
                bg-[#F1F1F2]
                text-gray-800
                border
                border-gray-300
                rounded-md
                py-2.5
                px-3
                focus:outline-none
            "
      :type="inputType"
      v-model="inputComputed"
      autocomplete="off"
      :maxlength="max"
    >
    <span v-if="error" class="text-red-500 text-[14px] font-semibold">
            {{ error }}
        </span>
  </div>

</template>

<script>
export default {
  props: ['input', 'placeholder', 'inputType', 'max', 'autoFocus', 'error'],
  mounted() {
    if (this.autoFocus) {
      document.getElementById(`input-${this.placeholder}`).focus()
    }
  },
  computed: {
    inputComputed: {
      get() {
        return this.input
      },
      set(val) {
        this.$emit('update:input', val)
      }
    }
  }
}
</script>
